<template>
  <div :key="card.cardId" :class="card.tear" class="card">
    <img :alt="card.value" :class="`card-img ${card.tear}`" :src="card.imagePath" />
  </div>
</template>

<script lang="ts" setup>
import type { Card } from '../utils/poker.ts'

const card = defineProps<Card>()
</script>

<style scoped>
.card {
  position: absolute;
  /* outline: 1px solid #ccc; */
  border-radius: 10px;
  overflow: hidden;
  transition:
    transform 0.5s,
    opacity 0.5s,
    left 0.5s,
    top 0.5s;
  box-shadow: 0.1rem 0.1rem 0.3rem rgba(0, 0, 0, 0.3);
}

.card.keep-top {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.card.keep-bottom {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.card-img {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.card-img.keep-bottom {
  top: auto;
  bottom: 0;
}
</style>
